<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div>{{num}}</div>
        <!-- v-on:事件类型='业务逻辑 || 方法名' -->
        <button v-on:click='num++'>点击</button>
        <!-- 简写模式 -->
        <button @click='num--'>点击1</button>    
        <!-- 事件函数的调用，当逻辑多的时候，不适合写在标签里 -->
        <button @click='handle'>点击2</button>
        <!-- 带括号的是带参数的 -->
        <button @click='handle1(123,456 ,$event)'>点击4</button>
        <!-- 默认情况不写参数也有默认事件对象，有参数的情况下，最后一个$event是事件对象，没有参数的情况下，第一个参数是事件对象 -->
        <button @click='handle1()'>点击4</button>
        <button @click='add'>按钮+100</button>
        <button @click='add2(150,$event)'>按钮+200</button>

    </div>
</body>
<script src="./V/vue.js"></script>
<script>
    // 事件绑定

    var vn = new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{    //函数必须定义在这里
            handle:function(){
                this.num++   //this指向这个实例对象
            }, handle1:function(a,b,event){
                console.log(a);
                console.log(b);
                console.log(event.target.tagName);
                console.log(event.target.innerHTML);

            },handle2:function(a,b,event){
                console.log(a);
                console.log(b);
                console.log(event.target.tagName);
                console.log(event.target.innerHTML);

            },add(e){
                var res = e.target.innerHTML
                // console.log(res);
                // console.log(res.substring(res.indexOf('+')+1));
                this.num += (res.substring(res.indexOf('+')+1) -0)
            },add2(p,e){
                var res = e.target.innerHTML
                var a = res.substring(res.indexOf('+')+1) -0
                // console.log(res);
                // console.log(res.substring(res.indexOf('+')+1));
                // this.num += (res.substring(res.indexOf('+')+1) -0)
                console.log(p+a);
            }
        }
    })
    // 事件绑定，参数传递
    //  1.如果事件直接绑定函数名，那么默认会传递事件对象作为事件函数的第一个参数
    // 2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数，进行传递，并且事件对象的名称必须是固定的$event
</script>
</html>